<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resizables Test Page</title>
<script type="text/javascript" src="../../../jquery/src/core.js"></script>
<script type="text/javascript" src="../../../jquery/src/selector.js"></script>
<script type="text/javascript" src="../../../jquery/src/event.js"></script>
<script type="text/javascript" src="../../../jquery/src/ajax.js"></script>
<script type="text/javascript" src="../../../jquery/src/fx.js"></script>
<script type="text/javascript" src="../../../jquery/src/offset.js"></script>
<script type="text/javascript" src="../../dimensions/jquery.dimensions.js"></script>
<script type="text/javascript" src="../ui.mouse.js"></script>
<script type="text/javascript" src="../ui.resizable.js"></script>
<script type="text/javascript" src="../ui.draggable.js"></script>
<style type="text/css" media="all">

body
{
	background: #fff;
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: 12px;
}

.proxy {
	border: 1px dotted black;	
}


.ui-resizable-handle { position: absolute; background: #ddd; display: none; }
.ui-resizable .ui-resizable-handle { display: block }
.ui-resizable-n { cursor: n-resize; height: 10px; left: 30px; right: 30px; }
.ui-resizable-e { cursor: e-resize; width: 10px; top: 30px; bottom: 30px; }
.ui-resizable-s { cursor: s-resize; height: 10px; left: 30px; right: 30px; }
.ui-resizable-w { cursor: w-resize; width: 10px; top: 30px; bottom: 30px; }

.ui-resizable-se { cursor: se-resize; width: 10px; height: 10px; }
.ui-resizable-sw { cursor: sw-resize; width: 10px; height: 10px; }
.ui-resizable-ne { cursor: ne-resize; width: 10px; height: 10px; }
.ui-resizable-nw { cursor: nw-resize; width: 10px; height: 10px; }
</style>
</head>
<body class="flora">
  
<textarea id='textarea' style='width: 400px; height: 200px; border: 2px solid blue; margin: 0px; padding: 10px;'>I was made resizable with this code only: $('#textarea').resizable();</textarea>
	
<div id='resizeme' style='width: 300px; height: 200px; border: 1px solid black; margin: 20px; position: relative;'>
<div class='ui-resizable-n ui-resizable-handle' style='height: 10px; top: 0px; left: 30px; right: 30px;'></div>
<div class='ui-resizable-e ui-resizable-handle' style='width: 10px; bottom: 30px; right: 0px; top: 30px;'></div>	
<div class='ui-resizable-s ui-resizable-handle' style='height: 10px; bottom: 0px; left: 30px; right: 30px;'></div>
<div class='ui-resizable-w ui-resizable-handle' style='width: 10px; bottom: 30px; left: 0px; top: 30px;'></div>

<div class='ui-resizable-se ui-resizable-handle' style='width: 10px; height: 10px; bottom: 0px; right: 0px;'></div>
<div class='ui-resizable-sw ui-resizable-handle' style='width: 10px; height: 10px; bottom: 0px; left: 0px;'></div>
<div class='ui-resizable-ne ui-resizable-handle' style='width: 10px; height: 10px; top: 0px; right: 0px;'></div>
<div class='ui-resizable-nw ui-resizable-handle' style='width: 10px; height: 10px; top: 0px; left: 0px;'></div>

<div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>Relative position without proxy (w,nw,n automatically disabled)</div>
</div>

<div id='resizeme4' style='width: 300px; height: 200px; border: 1px solid black; margin: 20px; position: relative;'>
<div class='ui-resizable-n ui-resizable-handle' style='height: 10px; top: 0px; left: 30px; right: 30px;'></div>
<div class='ui-resizable-e ui-resizable-handle' style='width: 10px; bottom: 30px; right: 0px; top: 30px;'></div>	
<div class='ui-resizable-s ui-resizable-handle' style='height: 10px; bottom: 0px; left: 30px; right: 30px;'></div>
<div class='ui-resizable-w ui-resizable-handle' style='width: 10px; bottom: 30px; left: 0px; top: 30px;'></div>

<div class='ui-resizable-se ui-resizable-handle' style='width: 10px; height: 10px; bottom: 0px; right: 0px;'></div>
<div class='ui-resizable-sw ui-resizable-handle' style='width: 10px; height: 10px; bottom: 0px; left: 0px;'></div>
<div class='ui-resizable-ne ui-resizable-handle' style='width: 10px; height: 10px; top: 0px; right: 0px;'></div>
<div class='ui-resizable-nw ui-resizable-handle' style='width: 10px; height: 10px; top: 0px; left: 0px;'></div>

<div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>Relative position with proxy (all directions enabled)</div>
</div>





<div id='resizeme2' style='width: 300px; height: 200px; border: 1px solid black; position: relative; position: absolute; top: 20px; right: 20px;'>
<div class='ui-resizable-n ui-resizable-handle' style='height: 10px; top: 0px; left: 30px; right: 30px;'></div>
<div class='ui-resizable-e ui-resizable-handle' style='width: 10px; bottom: 30px; right: 0px; top: 30px;'></div>	
<div class='ui-resizable-s ui-resizable-handle' style='height: 10px; bottom: 0px; left: 30px; right: 30px;'></div>
<div class='ui-resizable-w ui-resizable-handle' style='width: 10px; bottom: 30px; left: 0px; top: 30px;'></div>

<div class='ui-resizable-se ui-resizable-handle' style='width: 10px; height: 10px; bottom: 0px; right: 0px;'></div>
<div class='ui-resizable-sw ui-resizable-handle' style='width: 10px; height: 10px; bottom: 0px; left: 0px;'></div>
<div class='ui-resizable-ne ui-resizable-handle' style='width: 10px; height: 10px; top: 0px; right: 0px;'></div>
<div class='ui-resizable-nw ui-resizable-handle' style='width: 10px; height: 10px; top: 0px; left: 0px;'></div>

<div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>Absolute position without proxy (all directions enabled)</div>
</div>

<div id='resizeme3' style='width: 300px; height: 200px; border: 1px solid black; position: relative; position: absolute; bottom: 20px; right: 20px;'>
<div class='ui-resizable-n ui-resizable-handle' style='height: 10px; top: 0px; left: 30px; right: 30px;'></div>
<div class='ui-resizable-e ui-resizable-handle' style='width: 10px; bottom: 30px; right: 0px; top: 30px;'></div>	
<div class='ui-resizable-s ui-resizable-handle' style='height: 10px; bottom: 0px; left: 30px; right: 30px;'></div>
<div class='ui-resizable-w ui-resizable-handle' style='width: 10px; bottom: 30px; left: 0px; top: 30px;'></div>

<div class='ui-resizable-se ui-resizable-handle' style='width: 10px; height: 10px; bottom: 0px; right: 0px;'></div>
<div class='ui-resizable-sw ui-resizable-handle' style='width: 10px; height: 10px; bottom: 0px; left: 0px;'></div>
<div class='ui-resizable-ne ui-resizable-handle' style='width: 10px; height: 10px; top: 0px; right: 0px;'></div>
<div class='ui-resizable-nw ui-resizable-handle' style='width: 10px; height: 10px; top: 0px; left: 0px;'></div>

<div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>Absolute position with proxy (all directions enabled), ah, and I'm draggable, too!</div>
</div>
	
<script type="text/javascript">
if(!window.console) {
 window.console = {
 	log: function() {
 		alert(arguments[0]);	
 	}	
 }	
}

$(document).ready(function(){

	$('#textarea').resizable();
	
	$('#resizeme, #resizeme2').resizable({
		//proxy: "proxy",
		minWidth: 200,
		minHeight: 100,
		maxWidth: 500,
		maxHeight: 300,
		start: function(e,ui) {
			//console.log('start ', ui);	
		},
		stop: function(e,ui) {
			//console.log('stop ', ui);	
		},
		resize: function(e,ui) {
			//console.log(e);	
		},
		alsoResize: [ "#resizeme3" ] 		
	});
	
	
	$('#resizeme3,#resizeme4').resizable({
		proxy: "proxy",
		minWidth: 200,
		minHeight: 100,
		maxWidth: 500,
		maxHeight: 300,
		handles: {
			n: '.ui-resizable-n',
			e: '.ui-resizable-e',
			s: '.ui-resizable-s',
			w: '.ui-resizable-w',
			se: '.ui-resizable-se',
			sw: '.ui-resizable-sw',
			ne: '.ui-resizable-ne',
			nw: '.ui-resizable-nw'
		},
		start: function(e,ui) {
			//console.log('start ', ui);	
		},
		stop: function(e,ui) {
			//console.log('stop ', ui);	
		},
		resize: function(e,ui) {
			//console.log(e);	
		}		
	});
	
	$('#resizeme3').draggable({ handle: "div:not(.ui-resizable-handle)" });


});
</script>
</body>
</html>
